<template>
  <div class="link">
    <div style="margin-top: 20px; padding: 6px 15px">
      <div class="home-title">友情链接</div>
      <div>
        <a
          style="font-size: 12px; margin-right: 10px"
          v-for="(item, index) in linkList"
          :key="index"
          target="_blank"
          :href="item.domain"
          >{{ item.name }}</a
        >
      </div>
    </div>
  </div>
  <!-- <div class="uzy-action">
    <div class="section">
      <div class="font">
        <img src="https://staticv2.youzy.cn/images/footer/data.png" />
      </div>
      <div class="font">
        <img src="https://staticv2.youzy.cn/images/footer/fillin.png" />
      </div>
      <div class="font">
        <img src="https://staticv2.youzy.cn/images/footer/change.png" />
      </div>
      <div class="font">
        <img src="https://staticv2.youzy.cn/images/footer/belive.png" />
      </div>
    </div>
  </div> -->
</template>
<script setup>
import { Friendship } from '@/api/home/home';
import { ref, onMounted } from 'vue';
const linkList = ref([]);
//友情链接
const FriendshipLink = () => {
  Friendship({
    page: 1,
    pageSize: 999,
  }).then((res) => {
    if (res.data.code == 20000) {
      linkList.value = res.data.data.data;
    }
  });
};
onMounted(() => {
  FriendshipLink();
});
</script>
<style lang="scss" scoped>
.link {
  width: 1200px;
  margin: 0 auto;
}
.home-title {
  border-bottom: 1px solid #f0f0f0;
  overflow: hidden;
  border-left: 0;
  padding: 0;
  height: 44px;
  line-height: 44px;
  font-size: 24px;
}
.uzy-action {
  background: #f5f4f8;
  width: 1200px;
  margin: 0 auto;
  .section {
    width: 1200px;
    margin: 0 auto;
    height: auto;
    color: #fff;
    overflow: hidden;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    .font {
      margin-right: 18px;
      width: auto;
      flex: 1;
      img:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }
    }
  }
}
</style>
